<template>
  <div>
    <img :src="this.article.cover_image" style="height: 500px; width: 100%;"></img>
    <div style="font-family: 楷体; font-size: 50px; color: white; margin-top: -130px">
      {{this.article.title}}
    </div>
    <div style="margin-top: 100px; margin-left: -22%">
      <el-avatar :size="120" :src="this.article.user_avatar" style="margin-left: -30%; margin-top: -10%"></el-avatar>
      <div style="margin-top: -33px; font-size: 22px; margin-left: 350px">
        <span style="color: #ff7200">
          {{this.article.user_name}}
        </span>
        &nbsp;&nbsp;
        {{this.article.update_time}}
        <div style="display: inline-block; float: right; margin-right: 20%">
          <i :class=star style="cursor: pointer; font-size: 16px; color: red; font-size: 22px" @click="likeOrDislike">
            12138
          </i>
          &nbsp;&nbsp;&nbsp;
          <i class="el-icon-s-promotion">分享</i>
        </div>
      </div>

    </div>
    <div style="width: 60%; margin-left: 20%; margin-top: 30px">
      <mavon-editor class="md"
                    :value="this.article.content"
                    :subfield = "false"
                    default-open = "preview"
                    :toolbars-flag = "false"
                    :editable="false"
                    :scrollStyle="true"
                    :ishljs="true"
      ></mavon-editor>
    </div>
    <div style="margin-left: 200px">
      <CommentComponent :comments="comments"></CommentComponent>
    </div>
  </div>
</template>

<script>
import CommentComponent from "@/components/Comment/CommentComponent";
export default {
  name: "Article",
  components:{
    CommentComponent
  },
  data(){
    return {
      article_id: 0,
      article: {},
      comments: [],
      like: 0,
      star: "el-icon-star-off"
    }
  },
  created() {
    this.article_id = this.$route.params.id
    this.getArticleById(this.article_id)
    this.getCommentsByArticleId(this.article_id)
  },
  methods: {
    likeOrDislike: function (){
      if(this.like == 0){
        this.like=1;
        this.star="el-icon-star-on"
      }else{
        this.like=0;
        this.star="el-icon-star-off"
      }
    },
    // 根据id搜索文章接口
    getArticleById: function (id){
      this.article = {
          title: "震惊这是文章标题啊啊啊啊啊啊啊啊",
          cover_image: "https://p1-q.mafengwo.net/s19/M00/AA/AE/CoNHGWPwYIRhHU70AAegN6c766k.jpeg?imageMogr2%2Fstrip",
          user_avatar: "https://img.zcool.cn/community/01a6095f110b9fa8012066219b67d4.png@1280w_1l_2o_100sh.png",
          user_name: "张扬很帅",
          content: "# 1\n北冥有鱼，其名为鲲。鲲之大，不知其几千里也；化而为鸟，其名为鹏。鹏之背，不知其几千里也；怒而飞，其翼若垂天之云。是鸟也，海运则将徙于南冥。南冥者，天池也。《齐谐》者，志怪者也。《谐》之言曰：“鹏之徙于南冥也，水击三千里，抟扶摇而上者九万里，去以六月息者也。”野马也，尘埃也，生物之以息相吹也。天之苍苍，其正色邪？其远而无所至极邪？其视下也，亦若是则已矣。且夫水之积也不厚，则其负大舟也无力。覆杯水于坳堂之上，则芥为之舟；置杯焉则胶，水浅而舟大也。风之积也不厚，则其负大翼也无力。故九万里，则风斯在下矣，而后乃今培风；背负青天，而莫之夭阏者，而后乃今将图南。蜩与学鸠笑之曰：“我决起而飞，抢榆枋而止，时则不至，而控于地而已矣，奚以之九万里而南为？”适莽苍者，三餐而反，腹犹果然；适百里者，宿舂粮；适千里者，三月聚粮。之二虫又何知！小知不及大知，小年不及大年。奚以知其然也？朝菌不知晦朔，蟪蛄不知春秋，此小年也。楚之南有冥灵者，以五百岁为春，五百岁为秋；上古有大椿者，以八千岁为春，八千岁为秋。此大年也。而彭祖乃今以久特闻，众人匹之，不亦悲乎？\n" +
              "\n" +
              "## 2\n汤之问棘也是已：“穷发之北，有冥海者，天池也。有鱼焉，其广数千里，未有知其修者，其名为鲲。有鸟焉，其名为鹏，背若泰山，翼若垂天之云；抟扶摇羊角而上者九万里，绝云气，负青天，然后图南，且适南冥也。斥鷃笑之曰：‘彼且奚适也？我腾跃而上，不过数仞而下，翱翔蓬蒿之间，此亦飞之至也。而彼且奚适也？’”此小大之辩也。\n" +
              "\n" +
              "### 3\n故夫知效一官、行比一乡、德合一君、而征一国者，其自视也，亦若此矣。而宋荣子犹然笑之。且举世誉之而不加劝，举世非之而不加沮，定乎内外之分，辩乎荣辱之境，斯已矣。彼其于世，未数数然也。虽然，犹有未树也。夫列子御风而行，泠然善也，旬有五日而后反。彼于致福者，未数数然也。此虽免乎行，犹有所待者也。若夫乘天地之正，而御六气之辩，以游无穷者，彼且恶乎待哉？故曰：至人无己，神人无功，圣人无名。\n" +
              "\n" +
              "![](https://img.zcool.cn/community/0199c95eef1c15a801206621a52ca8.jpg@1280w_1l_2o_100sh.jpg)\n" +
              "#### 4\n尧让天下于许由，曰：“日月出矣，而爝火不息；其于光也，不亦难乎？时雨降矣，而犹浸灌；其于泽也，不亦劳乎？夫子立而天下治，而我犹尸之；吾自视缺然，请致天下。”许由曰：“子治天下，天下既已治也；而我犹代子，吾将为名乎？名者，实之宾也；吾将为宾乎？鹪鹩巢于深林，不过一枝；偃鼠饮河，不过满腹。归休乎君，予无所用天下为！庖人虽不治庖，尸祝不越樽俎而代之矣！”\n" +
              "\n" +
              "　　肩吾问于连叔曰：“吾闻言于接舆，大而无当，往而不反。吾惊怖其言。犹河汉而无极也；大有径庭，不近人情焉。”连叔曰：“其言谓何哉？”曰：“藐姑射之山，有神人居焉。肌肤若冰雪，淖约若处子，不食五谷，吸风饮露，乘云气，御飞龙，而游乎四海之外；其神凝，使物不疵疠而年谷熟。吾以是狂而不信也。”连叔曰：“然。瞽者无以与乎文章之观，聋者无以与乎钟鼓之声。岂唯形骸有聋盲哉？夫知亦有之！是其言也，犹时女也。之人也，之德也，将旁礴万物以为一，世蕲乎乱，孰弊弊焉以天下为事！之人也，物莫之伤：大浸稽天而不溺，大旱金石流，土山焦而不热。是其尘垢秕糠将犹陶铸尧舜者也，孰肯以物为事？”宋人资章甫而适诸越，越人断发文身，无所用之。尧治天下之民，平海内之政，往见四子藐姑射之山，汾水之阳，窅然丧其天下焉。\n" +
              "\n" +
              "　　惠子谓庄子曰：“魏王贻我大瓠之种，我树之成，而实五石。以盛水浆，其坚不能自举也。剖之以为瓢，则瓠落无所容。非不呺然大也，吾为其无用而掊之。”庄子曰：“夫子固拙于用大矣。宋人有善为不皲手之药者，世世以洴澼絖为事。客闻之，请买其方百金。聚族而谋曰：‘我世世为洴澼絖，不过数金，今一朝而鬻技百金，请与之。’客得之，以说吴王。越有难，吴王使之将，冬，与越人水战，大败越人。裂地而封之。能不皲手一也，或以封，或不免于洴澼絖，则所用之异也。今子有五石之瓠，何不虑以为大樽，而浮乎江湖，而忧其瓠落无所容？则夫子犹有蓬之心也夫！”\n" +
              "\n" +
              "　　惠子谓庄子曰：“吾有大树，人谓之樗。其大本拥肿而不中绳墨，其小枝卷曲而不中规矩，立之途，匠者不顾。今子之言大而无用，众所同去也。”庄子曰：“子独不见狸狌乎？卑身而伏，以候敖者；东西跳梁，不辟高下；中于机辟，死于罔罟。今夫斄牛，其大若垂天之云。此能为大矣，而不能执鼠。今子有大树，患其无用，何不树之于无何有之乡，广莫之野，彷徨乎无为其侧，逍遥乎寝卧其下。不夭斤斧，物无害者，无所可用，安所困苦哉！"
        ,
          update_time: "2023-2-24 14:30"
      }
    },
    getCommentsByArticleId: function (id) {
      this.comments = [
        {
          id: 111,
          from_avatar: "https://img.zcool.cn/community/015ac85f110b9fa801206621387957.png@1280w_1l_2o_100sh.png",
          from_name: "叶雨枫测试账号1号",
          content: "   # 2020，清晰的记得也是春节xxxx🧨，\n" +
              " ***即使雷神山已经开始动工，*** \n" +
              " 即使在 西班牙 🇪🇸已经抢不着口罩，\n" +
              " 即使法航停飞 中国 航班，只能靠毛子航空回国，\n" +
              " ## 即使第一次机上如临大敌戴上N95😷...\n" +
              " 入境后我依然在盘算，接下来该买哪儿的机票✈️\n" +
              " 这一盘算，\n" +
              " 是整整三年，\n" +
              " 谁也没有想到，疫情会持续如此长的时间；\n" +
              " 谁也没有想到，疫情会影响这么多人，这么多行业；\n" +
              " 即使雷神山已经开始动工，\n",
          create_time: "2023-3-2 10:35",
          like_num: 12138,
          reply_comment: [
            {
              id: 333,
              from_avatar: "https://img.zcool.cn/community/01a6095f110b9fa8012066219b67d4.png@1280w_1l_2o_100sh.png",
              from_name: "牙木",
              to_id: 111,
              content: "   # 2020，清晰的记得也是春节xxxx🧨，\n" +
                  " ***即使雷神山已经开始动工，*** \n" +
                  " 即使在 西班牙 🇪🇸已经抢不着口罩，\n" +
                  " 即使法航停飞 中国 航班，只能靠毛子航空回国，\n" +
                  " ## 即使第一次机上如临大敌戴上N95😷...\n" +
                  " 入境后我依然在盘算，接下来该买哪儿的机票✈️\n" +
                  " 这一盘算，\n" +
                  " 是整整三年，\n" +
                  " 谁也没有想到，疫情会持续如此长的时间；\n" +
                  " 谁也没有想到，疫情会影响这么多人，这么多行业；\n" +
                  " 即使雷神山已经开始动工，\n",
              create_time: "2023-3-3 10:38",
              like_num: 9999
            },
            {
              id: 222,
              from_avatar: "https://img.zcool.cn/community/014f685f110b9fa801215aa096689e.png@1280w_1l_2o_100sh.png",
              from_name: "张扬别学算法啦",
              to_id: 111,
              content: "张扬偷着学算法被我逮住啦",
              create_time: "2023-3-3 10:35",
              like_num: 12190,
            },
          ]
        }
      ]
    }
  },

}
</script>

<style scoped>

</style>